<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow">
                <div>
                    <a-form :model="queryData" size="small" layout="inline">
                        <a-form-item label="当班日期" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.recordDate"
                                @press-enter="huiche" />
                        </a-form-item>
                        <a-form-item label="车间名称" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input allow-clear class="bacClass" placeholder="" v-model="pageData.clothCode"
                                @press-enter="huiche" />
                        </a-form-item>
                    </a-form>
                </div>
                <div class="my-tool-bar">
                    <Toolbar :style="{ width: '200px !im' }" :items="['查询', '打印']" @select="cx" @dyBoufei="printTz">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>

        </template>
        <template #pageTabel>
            <a-tabs   :lazy-load="true" default-active-key="1" style="height: 100%;">
                <a-tab-pane key="1" title="生产工序" style="height: 90%;">
                    <div style="display: flex;justify-content:space-between;width: 100%;height: 100%;">
                        <div style="width:50%;height:100%">
                            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                                :localeText="localeText1" rowSelection="multiple" @grid-ready="gridReady"
                                style="height:100%" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                                :rowData="table.dataList" :columnDefs="tc">
                            </AgGridVuesCopys>
                        </div>
                        <div style="width:50%;height:100%">
                            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                                :localeText="localeText1" rowSelection="multiple" @grid-ready="gridReady1"
                                style="height:100%" :defaultColDef="defaultColDef1" class='ag-theme-alpine'
                                :rowData="pageData.tableList1" :columnDefs="tc1">
                            </AgGridVuesCopys>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" title="回修部分" style="height: 90%;">
                    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                        :localeText="localeText1" rowSelection="multiple" @grid-ready="gridReady2" style="height:100%"
                        :defaultColDef="defaultColDef2" class='ag-theme-alpine' :rowData="pageData.tableList2"
                        :columnDefs="tc2">
                    </AgGridVuesCopys>
                </a-tab-pane>
                <a-tab-pane key="3" title="耗能部分" style="height: 90%;">
                    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                        :localeText="localeText1" rowSelection="multiple" @grid-ready="gridReady3" style="height:100%"
                        :defaultColDef="defaultColDef3" class='ag-theme-alpine' :rowData="pageData.tableList3"
                        :columnDefs="tc3">
                    </AgGridVuesCopys>
                </a-tab-pane>
                <a-tab-pane key="4" title="回修明细" style="height: 90%;">
                    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                        :localeText="localeText1" rowSelection="multiple" @grid-ready="gridReady4" style="height:100%"
                        :defaultColDef="defaultColDef4" class='ag-theme-alpine' :rowData="pageData.tableList4"
                        :columnDefs="tc4">
                    </AgGridVuesCopys>
                </a-tab-pane>
            </a-tabs>
        </template>
        <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize" @page-size-change="change1"
            style="justify-content: center" :page-size="pagination.pageSize" :current="pagination.page" />

        <a-modal draggable :visible="visible" @ok="handleOk" @cancel="handleCancel" okText="打印" cancelText="关闭"
            unmountOnClose :width="1200">
            <template #title>
                打印
            </template>
            <div id="tzscbb">
                <div style="width:100%;">
                    <h2 style="margin: 0 auto;width: 100%;text-align: center;">特整生产报表</h2>
                    <div style="width: 100%;text-align: right;">日期：</div>
                    <table style="border-collapse:collapse;width:100%;" class="table">
                        <tr>
                            <td colspan="7">生产报表</td>
                        </tr>
                        <tr>
                            <td rowspan="2">工序</td>
                            <td colspan="2">A班/过机量(吨)</td>
                            <td colspan="2">B班/过机量(吨)</td>
                            <td colspan="2">合计/过机量(吨)</td>
                        </tr>
                        <tr>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                        </tr>
                        <tr>
                            <td colspan="7">回修</td>
                        </tr>
                        <tr>
                            <td rowspan="2">责任部门</td>
                            <td colspan="2">A班</td>
                            <td colspan="2">B班</td>
                            <td colspan="2">合计</td>
                        </tr>
                        <tr>
                            <td>回修量(吨)</td>
                            <td>比例</td>
                            <td>回修量(吨)</td>
                            <td>比例</td>
                            <td>回修量(吨)</td>
                            <td>比例</td>
                        </tr>
                        <tr>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                        </tr>
                        <tr>
                            <td colspan="7">耗能报表</td>
                        </tr>
                        <tr>
                            <td rowspan="2">项目</td>
                            <td colspan="2">A班</td>
                            <td colspan="2">B班</td>
                            <td colspan="2">合计</td>
                        </tr>
                        <tr>
                            <td>总耗量</td>
                            <td>吨耗量</td>
                            <td>总耗量</td>
                            <td>吨耗量</td>
                            <td>总耗量</td>
                            <td>吨耗量</td>
                        </tr>
                        <tr>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                            <td>111</td>
                        </tr>
                    </table>
                    <div><span style="margin-right: 50px;">制表人：</span><span>打印时间：</span></div>

                </div>
            </div>
        </a-modal>
    </pageTabelLayout>
</template>
<script lang='ts' setup>
import { number } from 'echarts/core';
import { reactive, toRefs, ref } from 'vue'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import { post } from '@/api/http'
import { url } from 'inspector';

import { Message, Modal } from '@arco-design/web-vue';
import { IconDoubleUp, IconDoubleDown } from '@arco-design/web-vue/es/icon';
import { localeText } from '@/api/aggridZw'
import printJS from 'print-js'
import { InputInstance } from "@arco-design/web-vue/es/input";
import { Key } from '@element-plus/icons-vue';
//引入导出方法
import { EXPORTEXEL, EXELTABLE } from '@/utils/exportEXCEL'
const localeText1: any = ref(localeText)

const queryData: any = reactive({
    "fabricId": "",
    "recordCode": "",
    "recordDate": "",
    "circulatCard": "",
    "planCode": "",
    "customName": "",
    "clothCode": "",
    "brandName": "",
    "colorCode": "",
    "colorName": "",
    "pieceNum": "",
    "weight": "",
    "width": "",
    "gramWeight": "",
    "customOrderCode": "",
    "greyName": "",
    "remark": "",
    "clothStep": "",
    SpecialManageSinge: [],
    SpecialManageBristle: [],
    SpecialManageSand: [],
    SpecialManageScratch: [],
    SpecialManageComb: [],
    SpecialManageShear: [],
    SpecialManageFluff: [],

});
const pageData: any = reactive({
    showAdd: false,
    sideTitle: '新增',
    tableList1: [],
    tableList2: [],
    tableList3: [],
    tableList4: [],
})
const getFocus1 = ref<InputInstance | null>(null);
onMounted(() => {
    getFocus1.value?.focus();
});

const headerShow = ref<boolean>(true)
function doRefresh() {
    post({
        url: '/dwWorkShop/SpecialManage/getPage',
        data: {
            page: pagination.page,
            size: pagination.pageSize,
            "beginDate": "",
            "endDate": "",
            "recordCode": "",
            "circulatCard": "",
            "clothCode": "",
            "brandName": "",
            "planCode": "",
            "customName": ""
        }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            table.handleSuccess(data.list);
            // pagination.setTotalSize(data.total);
            gridOption.value.setRowData(data.list);
            total.value = data.total;
            pageData.dataList = data.list
        }
    })
        .catch(console.log);
}
const total = ref(0);
const page = ref(1);
const size = ref(0);
function PageSize(val: any) {
    pagination.page = val
    doRefresh();
}
function change1(val: any) {
    pagination.pageSize = val
    doRefresh();
}
const cx = () => {
    pagination.page = 1
    doRefresh()
}


const table = useTable()

const pagination = usePagination(doRefresh)
let selectedRowKeys1 = ref()


const tableColumns = useTableColumn([
    {
        title: "工序",
        key: "recordCode",
        dataIndex: "recordCode",
        width: 150,
    },

    {
        title: "A班(过机量吨)",
        key: "circulatCard",
        dataIndex: "circulatCard",
        width: 150
    },
    {
        title: "B班(过机量吨)",
        key: "circulatCard",
        dataIndex: "circulatCard",
        width: 150
    },
    {
        title: "合计",
        key: "circulatCard",
        dataIndex: "circulatCard",
        width: 150
    },
])

let tc: any = tableColumns.map((o) => {

    let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed']
    }
    return obj
})

let a = [{
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    //lockPosition: "left",
}]

const dataList = ref('1')
// 表格准备事件
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}
const gridOption1 = ref()
const gridReady1 = (params: any) => {
    gridOption1.value = params.api
}
const defaultColDef1 = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}
const gridOption2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
}
const defaultColDef2 = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}
const gridOption3 = ref()
const gridReady3 = (params: any) => {
    gridOption3.value = params.api
}
const defaultColDef3 = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}
const gridOption4 = ref()
const gridReady4 = (params: any) => {
    gridOption4.value = params.api
}
const defaultColDef4 = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
}

const huiche = () => {
    doRefresh();
}


let tc1: any = [
    {
        headerName: '工艺',
        field: 'machineNo',
        width: 150,
    },
    {
        headerName: 'A班(吨)',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: 'B班(吨)',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '合计(吨)',
        field: 'upDownPressure',
        width: 150,
    },
]


let tc2: any = [
    {
        headerName: '责任部门',
        field: 'machineNo',
        width: 150,
    },
    {
        headerName: 'A班',
        width: 150,
        children: [{
            headerName: '回修量(吨)',
            field: 'upDownPressure',
        },
        {
            headerName: '占比率(%)',
            field: 'upDownPressure',
        },
        ]
    },
    {
        headerName: 'B班',
        width: 150,
        children: [{
            headerName: '回修量(吨)',
            field: 'upDownPressure',
        },
        {
            headerName: '占比率(%)',
            field: 'upDownPressure',
        },
        ]
    },
    {
        headerName: '合计',
        width: 150,
        children: [{
            headerName: '回修量(吨)',
            field: 'upDownPressure',
        },
        {
            headerName: '占比率(%)',
            field: 'upDownPressure',
        },
        ]
    },
]


let tc3: any = [
    {
        headerName: '统计类型',
        field: 'machineNo',
        width: 150,
    },
    {
        headerName: '项目',
        field: 'machineNo',
        width: 150,
    },
    {
        headerName: 'A班',
        width: 150,
        children: [{
            headerName: '能耗量',
            field: 'upDownPressure',
        },
        {
            headerName: '平均(-/吨布)',
            field: 'upDownPressure',
        },
        ]
    },
    {
        headerName: 'B班',
        width: 150,
        children: [{
            headerName: '能耗量',
            field: 'upDownPressure',
        },
        {
            headerName: '平均(-/吨布)',
            field: 'upDownPressure',
        },
        ]
    },
    {
        headerName: '合计',
        width: 150,
        children: [{
            headerName: '能耗量',
            field: 'upDownPressure',
        },
        {
            headerName: '平均(-/吨布)',
            field: 'upDownPressure',
        },
        ]
    },
]


let tc4: any = [
    {
        headerName: '来源',
        field: 'machineNo',
        width: 150,
    },
    {
        headerName: '工序',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '日期',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '流转卡号',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '布号',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '品名',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '色号',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '匹数',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '重量',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '责任部门',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '回修原因',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '班组',
        field: 'upDownPressure',
        width: 150,
    },
    {
        headerName: '对色师傅',
        field: 'upDownPressure',
        width: 150,
    },
]

tc = a.concat(tc)
tc1 = a.concat(tc1)
tc2 = a.concat(tc2)
tc3 = a.concat(tc3)
tc4 = a.concat(tc4)

//打开打印弹窗
function printTz() {
    //判断是否勾选了数据
    // if (gridOption.value.getSelectedRows().length === 0) {
    //     Message.error('请勾选一条数据');
    //     return
    // }
    // if (gridOption.value.getSelectedRows().length > 1) {
    //     Message.error('请勾选一条数据');
    //     return
    // }
    // pageData.id = gridOption.value.getSelectedRows()[0]['id']
    // pageData.fabricId = gridOption.value.getSelectedRows()[0]['fabricId']

    visible.value = true;
}
const visible = ref(false);

const handleOk = () => {
    printJS({
        printable: 'tzscbb',
        type: 'html',
        targetStyles: ['*'],
    })
    visible.value = false;
};
const handleCancel = () => {
    visible.value = false;
}

</script>
<style lang='less' scoped>
.search-form {
    margin-top: 10px;
}

.fromTitle {
    width: 100%;
    background-color: white;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    form {
        width: 50% !important;
        margin-top: 10px !important;
    }

    &>.my-header {
        width: 100%;
        padding: 10px;
        padding-top: 0;
        background-color: white;


        min-height: 10%;

        &>.my-tool-bar {
            width: 100%;
            text-align: right;
            margin-top: 50px;
        }
    }
}

.fromTitle1 {
    margin-left: 50px;
    margin-top: 60px;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}


.table tr,
.table td {
    border: 1px solid #3e3e3e;
    text-align: center;
}
</style>